<script setup lang="ts">
import {computed, ref} from 'vue'
import {User, Lock} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
import axios from 'axios';
import {ElMessage, type FormInstance} from "element-plus";
import sha256 from 'crypto-js/sha256.js'
const userAccount = ref('')
const userPassword = ref('')
// 确认条款
const value1 = ref(false)
const router = useRouter()
const formRef = ref<FormInstance>()
const loading = ref(false)

interface LoginData {
  userAccount: string
  userPassword: string
}
// 计算表单是否有效
const rules = {
  userAccount: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 6, max: 14, message: '账号长度需在6-14位之间', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9_]+$/,
      message: '账号只能包含字母、数字和下划线',
      trigger: 'blur'
    }
  ],
  userPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 14, message: '密码长度需在8-14位之间', trigger: 'blur' }
  ]
}

const submit = async () => {
  try {
    loading.value = true

    // 表单验证
    await formRef.value?.validate()

    const requestData: LoginData = {
      userAccount: userAccount.value.trim(),
      userPassword: sha256(userPassword.value.trim()).toString()
    }

    const response = await axios.post(
        '/api/user/login',
        requestData,
        {
          headers: {
            'Content-Type': 'application/json'
          }
        }
    )

    if (response.data.code === 200) {
      ElMessage.success('登录成功')
        loading.value = false
        router.push('/index')
    } else {
      ElMessage.error( '登录失败')
    }
  } catch (error) {
    if (axios.isAxiosError(error)) {
      ElMessage.error('请求失败')
    } else if (error instanceof Error) {
      ElMessage.error('请求失败')
    }
  } finally {
    loading.value = false
  }
}

</script>

<template>
  <div class="login">
    <el-form
        ref="formRef"
        :model="{ userAccount, userPassword}"
        :rules="rules"
        label-position="top"
        status-icon><!-- 添加验证状态图标 -->
      <el-form-item prop="userAccount">  <!-- 包裹输入框 -->
        <el-input
            id="login-userAccount-input"
            maxlength="14"
            v-model="userAccount"
            style="width: 320px"
            placeholder="请输入您的账号"
            :prefix-icon="User"
        />
      </el-form-item>

      <el-form-item prop="userPassword">  <!-- 包裹输入框 -->
        <el-input
            id="login-userPassword-input"
            maxlength="14"
            v-model="userPassword"
            style="width: 320px"
            type="password"
            placeholder="请输入您的密码"
            :prefix-icon="Lock"
        />
      </el-form-item>
      <div class="consent-clause">
        <el-switch v-model="value1"/>
        <div class="text">如需登录请同意并阅读
          <a href="https://www.yuque.com/marcus-fn9yk/gaux6b/lopqtutp72cynr6f" style="color: #1677ff; ">《修哒哒平台使用协议》</a>和
          <a href="https://www.yuque.com/marcus-fn9yk/gaux6b/bkercdldfwa3h29s" style="color: #1677ff; ">《修哒哒平台隐私政策》</a>
        </div>
      </div>
      <el-button type="primary" id="login-btn" :disabled="!value1" @click="submit">登录</el-button>
    </el-form>
  </div>
</template>

<style scoped>
.login {
  .el-input {
    /*输入框圆角曲率*/
    --el-input-border-radius: 8px;
    height: 40px;
  }

  :deep(.el-input__inner) {
    font-size: 16px !important;
  }

  .consent-clause {
    height: 60px;
    .el-switch {
      float: left;
      margin-top: 10px;
    }
    .text{
      float: left;
      margin-top: 5px;
      margin-left: 10px;
      width: 270px;
      height: 40px;
      font-size: 12px;
    }
  }

  #login-btn {
    width: 320px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    border-radius: 8px;
  }
}
</style>